<template>
	<div class="boxes-ai-form">
		<vue-scroll @handle-scroll="handleScroll">
			<a-form ref="serviceFormRef" :model="serviceForm" layout="vertical" :rules="serviceRules">
				<a-form-item name="aiSrvAlarmName" class="hide-required">
					<template #label>
						<span>告警名称</span>
					</template>
					<a-input v-model:value.trim="serviceForm.aiSrvAlarmName" :maxlength="20" placeholder="请输入" style="width: 320px"></a-input>
				</a-form-item>

				<a-form-item name="aiSrvAlarmName" class="hide-required form-item">
					<template #label>
						<span>风险等级</span>
					</template>
					<a-select v-model:value="serviceForm.securityLevel" style="width: 104px" :options="riskOptions"></a-select>
				</a-form-item>

				<a-form-item v-if="serviceForm.aiSrvDelayTriggerSeconds > -1" class="hide-required form-item" name="aiSrvDelayTriggerSeconds">
					<template #label>
						<span>触发延迟</span>
						<a-tooltip placement="top" title="持续检测到且超过设置周期，则产生告警">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<a-input-number
						id="inputNumber"
						v-model:value="serviceForm.aiSrvDelayTriggerSeconds"
						:min="serviceForm?.delayMin"
						:max="serviceForm?.delayMax"
						:precision="0"
						style="width: 104px"
					></a-input-number>
					&nbsp;秒
				</a-form-item>

				<a-form-item name="aiSrvTriggerInterval" class="hide-required form-item">
					<template #label>
						<span>触发间隔</span>
						<a-tooltip placement="top" title="产生报警后再次产生报警的时间间隔">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<a-input-number
						id="inputNumber"
						v-model:value="serviceForm.aiSrvTriggerInterval"
						:min="serviceForm?.intervalMin"
						:max="serviceForm?.intervalMax"
						:precision="0"
					></a-input-number>

					&nbsp;秒
				</a-form-item>

				<!-- 聚众算法时(19)  =====》  区域内人数字段 -->
				<a-form-item
					v-if="serviceForm?.aiSrvType === ServiceEnum.CROWD"
					:name="['aiSrvExtraArgs', 'areaPeopleCount']"
					:rules="[{ required: true, message: '请输入区域内人数', trigger: 'change' }]"
					class="hide-required form-item"
				>
					<template #label>
						<span>区域内人数</span>
						<a-tooltip placement="top" title="设定区域内人数达到多少人则为聚众">
							<i class="iconfont icon-information-line"></i>
						</a-tooltip>
					</template>
					<a-tooltip placement="bottom" title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！" trigger="focus">
						<a-input-number
							id="inputNumber"
							v-model:value="serviceForm.aiSrvExtraArgs.areaPeopleCount"
							:min="serviceForm?.aiSrvExtraArgs?.areaPeopleCountMin"
							:max="serviceForm?.aiSrvExtraArgs?.areaPeopleCountMax"
							:precision="0"
						></a-input-number>
					</a-tooltip>
					&nbsp; 人
				</a-form-item>

				<!-- 徘徊算法时(18)  =====》  停留时间字段 -->
				<a-form-item
					v-if="serviceForm?.aiSrvType === ServiceEnum.WANDER"
					:name="['aiSrvExtraArgs', 'wanderTime']"
					class="hide-required form-item"
					:rules="[{ required: true, message: '请输入停留时间', trigger: 'change' }]"
				>
					<template #label>
						<span>停留时间</span>
						<a-tooltip placement="top" title="设定同一个人持续停留在画面内多长时间则为徘徊 ">
							<i class="iconfont icon-information-line"></i>
						</a-tooltip>
					</template>
					<a-tooltip placement="bottom" title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！" trigger="focus">
						<a-input-number
							id="inputNumber"
							v-model:value="serviceForm.aiSrvExtraArgs.wanderTime"
							:min="serviceForm?.aiSrvExtraArgs?.wanderTimeMin"
							:max="serviceForm?.aiSrvExtraArgs?.wanderTimeMax"
							:precision="0"
						></a-input-number>
					</a-tooltip>
					&nbsp;秒
				</a-form-item>

				<!--人员超限检测 ====>  区域内人数  -->
				<a-form-item
					v-if="serviceForm?.aiSrvType === ServiceEnum.NUMBER_PEOPLE"
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'overrunPeopleNumber']"
					:rules="[{ required: true, message: '请输入区域内人数', trigger: 'change' }]"
				>
					<template #label>
						<span>区域内人数</span>
						<a-tooltip placement="top" :title="` 当区域内人数超出预设值时，则为超限`">
							<i class="iconfont icon-information-line"></i>
						</a-tooltip>
					</template>
					<a-tooltip placement="bottom" title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！" trigger="focus">
						<a-input-number
							id="inputNumber"
							v-model:value="serviceForm.aiSrvExtraArgs.overrunPeopleNumber"
							:min="serviceForm?.aiSrvExtraArgs?.overrunPeopleNumberMin"
							:max="serviceForm?.aiSrvExtraArgs?.overrunPeopleNumberMax"
							:precision="0"
						></a-input-number>
					</a-tooltip>
					&nbsp; <span style="color: #f0f6fc">人</span>
				</a-form-item>
				<a-form-item v-if="serviceForm.aiSrvAlgorithmSensitivity > -1" class="hide-required form-item" name="aiSrvAlgorithmSensitivity">
					<template #label>
						<span>算法灵敏度</span>
						<a-tooltip placement="top" title="数值越小越容易触发告警">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<div class="form-item-slider">
						<!-- <a-slider :min="0" :max="100" /> -->
						<a-slider v-model:value="serviceForm.aiSrvAlgorithmSensitivity" :min="0" :max="100"></a-slider>
						<a-form-item class="hide-required form-item" no-style>
							<a-input-number
								id="inputNumber"
								v-model:value="serviceForm.aiSrvAlgorithmSensitivity"
								:min="0"
								:max="100"
								:precision="0"
							></a-input-number>
						</a-form-item>
						&nbsp;&nbsp;%
					</div>
				</a-form-item>

				<a-form-item class="hide-required form-item" name="alertImageType">
					<template #label>
						<span>告警图像保存</span>
					</template>
					<a-form-item v-if="serviceForm?.aiSrvId === ServiceEnum.LIGHTING" :name="['aiSrvExtraArgs', 'alertSaveImage']">
						<a-switch
							v-model:checked="serviceForm.aiSrvExtraArgs.alertSaveImage"
							size="small"
							style="margin-top: -70px; margin-left: 100px"
							:checked-value="1"
							:un-checked-value="0"
							@change="onSwitchChange"
						></a-switch>
					</a-form-item>

					<a-radio-group
						v-if="serviceForm?.aiSrvExtraArgs?.alertSaveImage === 1 || serviceForm?.aiSrvType !== ServiceEnum.LIGHTING"
						v-model:value="serviceForm.alertImageType"
					>
						<a-radio :value="0">图片</a-radio>
					</a-radio-group>
				</a-form-item>

				<a-form-item
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'alertSaveOriginalImage']"
					:rules="[
						{
							required: true,
							message: '请选择同步保存报警记录图片原图',
							trigger: 'change'
						}
					]"
				>
					<template #label>
						<span>同步保存报警记录图片原图</span>
					</template>

					<a-radio-group v-model:value="serviceForm.aiSrvExtraArgs.alertSaveOriginalImage">
						<a-radio :value="0">关闭</a-radio>
						<a-radio :value="1">开启</a-radio>
					</a-radio-group>
				</a-form-item>

				<!-- v-if="serviceForm?.aiSrvExtraArgs?.showDetectionArea !== undefined" -->
				<a-form-item
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'showDetectionArea']"
					:rules="[
						{
							required: true,
							message: '请选择报警记录图片显示检测区域',
							trigger: 'change'
						}
					]"
				>
					<template #label>
						<span>报警记录图片显示检测区域</span>
					</template>
					<a-radio-group v-model:value="serviceForm.aiSrvExtraArgs.showDetectionArea">
						<a-radio :value="0">关闭</a-radio>
						<a-radio :value="1">开启</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item class="hide-required form-item" name="avAlarmStatus">
					<template #label>
						<span>声光报警器</span>
						<a-tooltip placement="top" :title="`外接声光报警器，并语音提示：${alarmsHintMap[serviceForm.aiSrvType as number]}`">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<a-radio-group v-model:value="serviceForm.avAlarmStatus">
						<a-radio :value="0">关闭</a-radio>
						<a-radio :value="1">开启</a-radio>
					</a-radio-group>
				</a-form-item>

				<!-- 宝鸡泵业项目定制的区域无人算法，新增设备联动报警功能 -->
				<a-form-item
					v-if="serviceForm?.aiSrvId === ServiceEnum.NOONE_AREA"
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'algorithmLinkageAlarm']"
					:rules="[
						{
							required: true,
							message: '请选择设备联动报警',
							trigger: 'change'
						}
					]"
				>
					<template #label>
						<span>设备联动报警</span>
					</template>
					<a-radio-group
						v-model:value="serviceForm.aiSrvExtraArgs.algorithmLinkageAlarm"
						class="background"
						@change="onEquipmentLinkageAlarmChange"
					>
						<a-radio :value="0">关闭</a-radio>
						<a-radio :value="1">开启</a-radio>
					</a-radio-group>
					<a-form-item
						v-if="serviceForm?.aiSrvExtraArgs?.algorithmLinkageAlarm === 1 || serviceForm?.aiSrvId !== ServiceEnum.NOONE_AREA"
						:name="['aiSrvExtraArgs', 'algorithmLinkageAlarmList']"
						:rules="[{ required: true, message: '请选择联动设备及算法' }]"
					>
						<a-cascader
							v-model:value="serviceForm.aiSrvExtraArgs.algorithmLinkageAlarmList"
							max-tag-count="responsive"
							:options="treeData"
							:field-names="{
								label: 'label',
								value: 'id',
								children: 'children'
							}"
							expand-trigger="hover"
							placeholder="请选择联动设备及算法"
							allow-clear
							style="width: 313px; height: 38px; margin-top: 20px"
							show-arrow
							@change="changeAlgorithmLinkage"
						></a-cascader>
					</a-form-item>
				</a-form-item>

				<!--大门未关闭算法，新增doorRoomSize房间大小  0小1大   -->
				<a-form-item
					v-if="serviceForm?.aiSrvId === ServiceEnum.GATE_NOTCLOSE"
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'doorRoomSize']"
					:rules="[{ required: true, message: '请选择房间大小', trigger: 'change' }]"
					@change="changeRoomSise(serviceForm.aiSrvExtraArgs.doorRoomSize)"
				>
					<template #label> <span>房间大小</span> </template>
					<a-radio-group v-model:value="serviceForm.aiSrvExtraArgs.doorRoomSize" class="background">
						<a-radio :value="1">大</a-radio>
						<a-radio :value="0">小</a-radio>
					</a-radio-group>
				</a-form-item>
				<!-- 宝鸡泵业项目定制的大门未关闭算法，新增房间ID字段 -->
				<!-- 大门未关闭在选择“大”房间时，房间ID点击显示11、12、13号选择项，选择房间大小未“小”时，房间ID点击显示：15、16、17号选项 -->
				<a-form-item
					v-if="serviceForm?.aiSrvId === ServiceEnum.GATE_NOTCLOSE"
					:name="['aiSrvExtraArgs', 'roomID']"
					:rules="[{ required: true, message: '请选择房间ID字段' }]"
					class="hide-required form-item"
				>
					<template #label>
						<span>房间ID</span>

						<a-tooltip placement="top" :title="`产生报警后再次产生报警的时间间隔, 数值范围：10～17，默认值：10`">
							<i class="iconfont icon-information-line"></i>
						</a-tooltip>
					</template>

					<a-select
						v-model:value="serviceForm.aiSrvExtraArgs.roomID"
						max-tag-count="responsive"
						placeholder="请选择房间ID字段"
						allow-clear
						:show-search="false"
						show-arrow
						style="width: 318px"
						:get-popup-container="
							(triggerNode: any) => {
								return triggerNode.parentNode;
							}
						"
					>
						<a-select-option :key="item.value" v-for="item in !BigOrSmall ? LargeRoomId : SmallRoomId" :value="item.value">
							<div class="center" style="justify-content: space-between">
								{{ item.label }}
							</div>
						</a-select-option>
					</a-select>
				</a-form-item>

				<!--防护面罩算法，新增maskRoomSize防护面罩房间大小 0小1大   -->
				<a-form-item
					v-if="serviceForm?.aiSrvId === ServiceEnum.MASK"
					class="hide-required form-item"
					:rules="[{ required: true, message: '请选择房间大小', trigger: 'change' }]"
				>
					<template #label> <span>房间大小</span> </template>
					<a-radio-group v-model:value="serviceForm.aiSrvExtraArgs.maskRoomSize" class="background">
						<a-radio :value="1">大</a-radio>
						<a-radio :value="0">小</a-radio>
					</a-radio-group>
				</a-form-item>

				<!--焊接规范检测算法，新增weldingRangeWidth焊接规范范围    -->
				<a-form-item
					v-if="serviceForm?.aiSrvId === ServiceEnum.WELDING"
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'weldingRangeWidth']"
					:rules="[{ required: true, message: '请输入焊接规范', trigger: 'change' }]"
				>
					<template #label>
						<span>焊接范围</span>

						<a-tooltip placement="top" :title="`焊接规范, 数值范围：1～3600，默认值：500`">
							<i class="iconfont icon-information-line"></i>
						</a-tooltip>
					</template>
					<a-tooltip placement="bottom" title="调整算法配置，会影响抓拍准确率以及抓拍效果，请谨慎操作！" trigger="focus">
						<a-input-number
							id="inputNumber"
							v-model:value="serviceForm.aiSrvExtraArgs.weldingRangeWidth"
							:min="1"
							:max="3600"
							:precision="0"
							style="width: 104px; height: 36px"
						></a-input-number>
					</a-tooltip>
				</a-form-item>

				<a-form-item class="hide-required form-item" name="validCycleTime">
					<template #label>
						<span>有效时间段</span>
					</template>
					<global-select-time ref="selectTimeRef" v-model:axis-list="serviceForm.validCycleTime"></global-select-time>
				</a-form-item>
				<a-form-item
					v-if="serviceForm?.aiSrvType === ServiceEnum.FACE_RECOGNITION && serviceForm.aiSrvExtraArgs.livenessDetection === 1"
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'livenessDetectionAlgorithmSensitivity']"
					:rules="[{ required: true, message: '请输入活体灵敏度' }]"
				>
					<template #label>
						<span>活体灵敏度</span>
						<a-tooltip placement="top" title="数值越小越容易触发告警">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<div class="form-item-slider">
						<a-slider v-model:value="serviceForm.aiSrvExtraArgs.livenessDetectionAlgorithmSensitivity" :min="0" :max="100"></a-slider>
						<a-form-item class="hide-required form-item" no-style>
							<a-input-number
								id="inputNumber"
								v-model:value="serviceForm.aiSrvExtraArgs.livenessDetectionAlgorithmSensitivity"
								:min="0"
								:max="100"
								:precision="0"
							></a-input-number>
						</a-form-item>
						&nbsp;&nbsp;%
					</div>
				</a-form-item>

				<a-form-item
					v-if="serviceForm?.aiSrvType === ServiceEnum.UNIFORM && showCoverallsLibrary"
					style="margin-top: 32px"
					:name="['aiSrvExtraArgs', 'uniformLight']"
					:rules="[{ required: true, message: '请选择使用场景' }]"
				>
					<template #label>
						<span>使用场景</span>
					</template>
					<a-radio-group v-model:value="serviceForm.aiSrvExtraArgs.uniformLight" @change="uniformLightChange">
						<a-radio :value="1">室外</a-radio>
						<a-radio :value="0">室内</a-radio>
					</a-radio-group>
				</a-form-item>

				<a-form-item
					v-if="serviceForm?.aiSrvType === ServiceEnum.UNIFORM && showCoverallsLibrary"
					class="hide-required form-item"
					:name="['aiSrvExtraArgs', 'uniformColor']"
					:rules="[{ required: true, message: '请选择工服颜色' }]"
				>
					<template #label>
						<span>工服颜色</span>
					</template>
					<a-select
						v-model:value="serviceForm.aiSrvExtraArgs.uniformColor"
						mode="multiple"
						max-tag-count="responsive"
						placeholder="请选择工服颜色"
						allow-clear
						:show-search="false"
						show-arrow
						style="width: 318px"
					>
						<a-select-option :key="item" v-for="item in colorList" :value="item.value">
							<div class="center" style="justify-content: space-between">
								{{ item.label }}
								<div class="color-box" :style="{ background: item.color }"></div>
							</div>
						</a-select-option>
					</a-select>
				</a-form-item>
				<!--  -->
				<a-form-item v-if="serviceForm?.aiSrvType === ServiceEnum.FACE_RECOGNITION && showFaceLibrary" class="hide-required form-item">
					<template #label>
						<span>人脸库</span>
						<a-tooltip placement="top" title="请上传不同角度和不同光照下的照片">
							<global-svg-icon icon-name="information-line" style="margin-left: 3px"></global-svg-icon>
						</a-tooltip>
					</template>
					<face-library :server-id="props.bAiServerId" :box-serial="boxSerial"></face-library>
				</a-form-item>
			</a-form>
		</vue-scroll>

		<!-- </template> -->
	</div>
</template>

<script setup lang="ts" name="boxes-ai-form">
import { FormInstance } from 'ant-design-vue';
import { Rule } from 'ant-design-vue/es/form';
import { FaceLibrary } from '../../index';
import { g6DeepClone } from 'glasssix-utils-ts';
import { useDeleteModal } from '@/global-hooks/base.hooks';
import { complexColorList, evenColorList, ServiceEnum, alarmsHintMap, LargeRoomId, SmallRoomId } from '../../cameras/config';
import { BoxManageApi } from '../../../api';
import { useRoute } from 'vue-router';
import { formatCascader, handleCascaderData } from '../../../utils';

const props = defineProps({
	showFaceLibrary: {
		type: Boolean,
		default: true
	},
	showCoverallsLibrary: {
		type: Boolean,
		default: true
	},
	loading: {
		type: Boolean,
		default: false
	},
	bAiServerId: {
		type: Number,
		default: null
	},
	boxSerial: {
		type: Number,
		default: null
	}
});

const riskOptions = ref<SelectProps['options']>([
	{ label: '低', value: 0 },
	{ label: '中', value: 1 },
	{ label: '高', value: 2 }
]);

const route = useRoute();

const { setOpenDeleteModal } = useDeleteModal();

const styleValue = reactive({
	'--header-height': '76px',
	'--main-height': '0px',
	'--border-bottom': '1px solid transparent'
});
const handleScroll = (vertical: Record<string, any>): void => {
	styleValue['--border-bottom'] = vertical.scrollTop > 5 ? '1px solid rgba(211, 211, 211, 0.2)' : '1px solid transparent';
};

// /**
//  * 表单
//  */
interface ServiceForm {
	id?: number | undefined;
	aiSrvType?: number | string;
	aiSrvStatus?: number | undefined;
	aiSrvTriggerInterval: number | string;
	aiSrvDelayTriggerSeconds: number;
	aiSrvAlgorithmSensitivity: any;
	alertImageType: number | string;
	avAlarmStatus: number | string;
	validCycleTime: any[];
	aiSrvExtraArgs: any;
	aiSrvAlarmName: string | undefined;
	intervalMin?: number | undefined;
	intervalMax?: number | undefined;
	delayMin?: number | undefined;
	delayMax?: number | undefined;
	securityLevel?: number | undefined;
}
const serviceFormRef = ref<FormInstance>();
const serviceForm = ref<ServiceForm>({
	validCycleTime: [],
	aiSrvTriggerInterval: '',
	aiSrvDelayTriggerSeconds: 0,
	aiSrvAlgorithmSensitivity: '',
	alertImageType: '',
	avAlarmStatus: '',
	aiSrvExtraArgs: {
		showDetectionArea: '',
		uniformColor: undefined,
		alertSaveOriginalImage: 0
	},
	securityLevel: 1,
	aiSrvAlarmName: '',
	aiSrvType: ''
});
const serviceRules: Record<string, Rule[]> = {
	validCycleTime: [{ required: false, message: '请选择有效时间段', trigger: 'change' }],
	aiSrvTriggerInterval: [{ required: true, message: '请输入触发间隔', trigger: 'change' }],
	aiSrvDelayTriggerSeconds: [{ required: true, message: '请输入触发延迟', trigger: 'change' }],
	aiSrvAlgorithmSensitivity: [{ required: true, message: '请输入算法灵敏度', trigger: 'change' }],
	alertImageType: [{ required: true, message: '请选择告警图像保存', trigger: 'change' }],
	avAlarmStatus: [{ required: true, message: '请选择声光报警器', trigger: 'change' }],
	serviceName: [{ required: true, message: '请选择活体检测', trigger: 'change' }],
	aiSrvAlarmName: [{ required: true, message: '请输入告警名称', trigger: 'blur' }]
};
const colorList = computed(() => {
	const mode = serviceForm.value?.aiSrvExtraArgs?.uniformLight;
	return mode === 1 ? evenColorList : complexColorList;
});
// 宝鸡定制算法区域无人 id 34
const treeData = ref([]);
const getDevicesAlgorithm = async (id: number) => {
	try {
		let { data } = await BoxManageApi.getDevicesAlgorithms({
			aiSrvType: id,
			boxSerial: route.query.boxSerial
		});
		treeData.value = data;
	} catch (error) {
		console.log('error', error);
	}
};

/**
 * 设置表单数据
 */
const BigOrSmall = ref<boolean | number>(true);

const oldFormData = reactive<ServiceForm>({} as ServiceForm); //老数据 用于部分值保留
const selectTimeRef = ref<any>(); // 时间段ref
const setFormData = (data: any): void => {
	// serviceForm.value = data;
	serviceForm.value = handleCascaderData(data);
	Object.assign(oldFormData, g6DeepClone(data));
	selectTimeRef.value?.setAxisList(data.validCycleTime);
	if (data.aiSrvId === 34) {
		getDevicesAlgorithm(data.aiSrvId);
	}
	if (data.aiSrvId === 29) {
		BigOrSmall.value = serviceForm.value?.aiSrvExtraArgs?.doorRoomSize ? 0 : 1;
	}
};

/**
 * 获取表单数据
 */
const getFormData = async () => {
	try {
		await serviceFormRef.value?.validate();
		return Promise.resolve(formatCascader(serviceForm.value, treeData.value));
	} catch (error) {
		return Promise.reject(error);
	}
};

/**
 * 同步获取表单数据
 */
const getFormDataSync = (): any => {
	return serviceForm.value;
};
/**
 * 改变使用场景值
 */
const uniformLightChange = (e: any) => {
	// 保存工服颜色值
	if (e.target.value === oldFormData.aiSrvExtraArgs.uniformLight) {
		serviceForm.value.aiSrvExtraArgs.uniformColor = oldFormData.aiSrvExtraArgs.uniformColor;
	} else {
		serviceForm.value.aiSrvExtraArgs.uniformColor = [8];
	}
};

/**
 * 灯光检测
 * 报警图片开关按钮
 */
const onSwitchChange = async () => {
	if (serviceForm.value.aiSrvExtraArgs.alertSaveImage === 0) {
		const deleteModalInfo = {
			title: '关闭该功能后，将不会保存该算法报警以后的图片以及视频，但是不会影响该算法正常运行！'
		};
		const closeFun = async () => {
			serviceForm.value.aiSrvExtraArgs.alertSaveImage = 0;
		};
		const expandCallBack = () => {
			serviceForm.value.aiSrvExtraArgs.alertSaveImage = 1;
		};
		setOpenDeleteModal(closeFun, deleteModalInfo, expandCallBack);
	}
};

/**
 * 区域无人
 * 设备联动报警开启/关闭
 */

const selectvalue = ref([]);
selectvalue.value = serviceForm.value.aiSrvExtraArgs?.algorithmLinkageAlarmList;

const onEquipmentLinkageAlarmChange = async (_checked: any) => {
	const content = {
		title:
			serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarm === 1
				? '开启后，请选择联动报警的设备以及算法。选择后，当前算法将会根据选择的对应设备下算法抓拍结果，去判断是否启动抓拍'
				: '关闭后，将和联动设备解绑，同时恢复单独检测模式'
	};

	const closeFun = async () => {
		serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarm = _checked.target.value;
	};
	const expandCallBack = () => {
		serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarm = _checked.target.value === 1 ? 0 : 1;
	};
	setOpenDeleteModal(closeFun, content, expandCallBack);
};

// 改变房间大小
const changeRoomSise = (size: string | number) => {
	console.log('房间大小', size);
	BigOrSmall.value = size ? 0 : 1;
	serviceForm.value.aiSrvExtraArgs.roomID = size ? 10 : 15;
};

// 递归筛选
const findObjectById = (data: any, id: string): any => {
	for (let i = 0; i < data.length; i++) {
		const obj = data[i];

		if (obj.id === id) {
			return obj;
		}
		if (obj?.children && obj?.children?.length > 0) {
			const result = findObjectById(obj.children, id);
			if (result) {
				return result;
			}
		}
	}
	return null;
};
const changeAlgorithmLinkage = (value: any): void => {
	value?.forEach((item: any) => {
		const re = findObjectById(treeData.value, item[item.length - 1]);

		if (re?.children) {
			re.children.forEach((itemChild: any) => {
				serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarmList.push(itemChild?.id as never);
			});
		} else {
			// serviceForm.value.aiSrvExtraArgs.algorithmLinkageAlarmList.push(re?.id as never)
		}
	});
};

defineExpose({
	getFormDataSync,
	setFormData,
	getFormData
});
</script>

<style lang="less" scoped>
// 弹窗
.boxes-ai-form {
	overflow-y: scroll;

	.ant-slider-rail {
		background: #171820;
	}

	.ant-slider-track {
		background: @secondary04;
	}

	.form-item {
		margin-top: 32px;
		color: @text03;
	}

	.ant-modal-footer {
		position: absolute;
	}

	.ant-form-item-control-input-content {
		color: @text02;
	}

	.ant-input-number {
		border: 1px solid @mask02;
		border-radius: 6px;
		background: transparent !important;
	}

	.form-item-slider {
		display: flex;
		align-items: center;

		:deep(.ant-slider) {
			width: 231px;
			margin-right: 15px;
			margin-left: 10px;

			.ant-slider-rail {
				background: @borderColor01 !important;
			}

			.ant-slider-track {
				background: linear-gradient(90deg, #e4ecff 0%, #185eff 100%) !important;
			}
		}
	}

	.iconfont {
		margin-left: 8px;
		color: @text04;
	}
}

.center {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.color-box {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
</style>
